<!-- 登录页面 -->
<style scoped>
/* 大div */
.box {
  width: 100%;
  height: 100vh;
  /* 假设你想让背景图片占据整个视口的高度 */
  background-image: url("../assets/10001.jpg");
  background-size: cover;
  /* 这将确保背景图片覆盖整个元素，而不会被拉伸或压缩 */
  background-position: center;
  /* 这将确保背景图片在元素中居中显示 */
  background-repeat: no-repeat;
  /* 这将确保背景图片不会重复 */
}

/* 飞机图片 */
.aircraft {
  width: 240px;
  height: 150px;
  margin: 50px 30px;
}

/* 登良注册最大的div */
.boxes {
  width: 80%;
  height: 250px;
  margin: 0 10%;
  background-color: rgba(255, 255, 255, 0.3);
  /* 白色半透明背景，透明度为0.5 */
  text-align: center;
}

/* 手机号 */
.cell_phone_number {
  width: 90%;
  height: 35px;
  margin: 30px 0;
  border: none;
  padding-left: 5px;
  font-size: 12px;
}

/* 密码 */
.password {
  width: 90%;
  height: 35px;
  /* margin: 10px 0; */
  border: none;
  padding-left: 5px;
  font-size: 12px;
}

/* 须知 */
.notice {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-top: 20px;
  font-size: 13px;
  margin-left: 5%;
  color: #2a82e4;
}

.button {
  width: 90%;
  height: 30px;
  background-color: #2a82e4;
  color: white;
  border: none;
  margin-top: 20px;
  border-radius: 15px;
}

.register {
  display: flex;
  justify-content: center;
  width: 50%;
}

.yoing {
  display: flex;
  text-indent: 6px;
  align-items: center;
  width: 50%;
}

/* 微信 */
.WeChat {
  margin-top: 160px;
  width: 45px;
  height: 45px;
}

.login_img {
  width: 80%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<template>
  <div class="box">
    <div class="login_img">
      <img class="aircraft" src="../assets/feiji.png" alt="" />
    </div>
    <div class="boxes">
      <input type="text" v-model="tel" class="cell_phone_number" placeholder="输入手机号" />
      <input type="password" v-model="password" class="password" placeholder="输入密码" />
      <div class="notice">
        <div class="yoing">
          <input type="checkbox" v-model="checkboxValue" />
          <span @click="agreement">用户协议</span>
        </div>
        <div class="register">
          <div>忘记密码?</div>
          <div @click="Register">前往注册</div>
        </div>
      </div>

      <button class="button" @click="LogIn">登录</button>
      <img class="WeChat" src="../assets/img18138218ad62eec50.png" alt="" />

      <div>@版权归大喇叭编程实训基地所有</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from "vue";
// import axios from "axios";
import { login } from "../api/login"
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
// 验证手机号是否是11位有效手机号
const isValidPhone = computed(() => /^1[3-9]\d{9}$/.test(tel.value.trim()));
const router = useRouter();
const route = useRoute();
const tel = ref("");
const password = ref("");
// const agreement = ref("");
const checkboxValue = ref(false);
// 前往注册
const Register = () => {
  router.push({
    name: "enroll",
  });
};
// 前往协议
const agreement = () => {
  router.push({
    name: "user",
  });
};
// 登录接口
function LogIn() {
  if (!isValidPhone.value) {
    showFailToast("手机号格式不正确");
  }
  // 用户协议未勾选提示
  if (checkboxValue.value == false) {
    showFailToast("请勾选用户协议");
  }
  // 手机号未输入提示
  if (tel.value == "") {
    showFailToast("请输入手机号");
  }
  // 密码未输入提示
  if (password.value == "") {
    showFailToast("请输入密码");
  }
  // 手机号和密码未输入提示
  if (tel.value == "" && password.value == "") {
    showFailToast("请输入手机号和密码");
  }
  // 手机号、密码均不为空并且用户协议勾选请求接口
  const dysId = ref([])
  if (
    checkboxValue.value == true &&
    tel.value != "" &&
    password.value != "" &&
    isValidPhone.value
  ) {
    login({
      tel: tel.value,
      pass: password.value,
    })
      .then((res) => {
        console.log(res, '登录成功');
        dysId.value = res.data
        console.log(dysId.value.id);
        console.log(dysId.value, '1');
        // 请求成功跳转首页
        if (res.code == 1) {
          showSuccessToast("登录成功");
          setTimeout(() => {
            router.replace({
              path: "/home",
            });
          }, 3000);
          sessionStorage.setItem('useinfo',JSON.stringify(dysId.value))
        } else if ((res.msg = "账号或密码不正确")) {
          showFailToast("账号或密码不正确");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
</script>